<template>
  <el-container>
    <el-header style="height: 50px;">
      <div class="header-left">
          <p>项目</p>
          <el-select v-model="value" placeholder="ABC综合体项目" style="height: 30px;">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="header-right">
          巡检管理/{{title}}
        </div>
        <div class="weather">
        <Weather></Weather>
        <Date></Date>
      </div>
    </el-header>
    <el-container>
      <el-aside width="260px" >
        <el-menu
        class="el-menu-vertical-demo"
        background-color="#3a4049"
        text-color="#fff"
        active-text-color="#ef9126"
        :router="true"
        default-active="/inspection/patrolScheme"
        >
        <el-menu-item index="/inspection/patrolScheme" @click="patrolScheme">
              <i class="iconfont icon-firealarm"></i>
            <template slot="title">巡检计划</template>
            </el-menu-item>
            <el-menu-item index="/inspection/InspectionTasks"  @click="InspectionTasks">
              <i class="iconfont icon-firewateralarm"></i>
            <template slot="title">巡检任务</template>
            </el-menu-item>
            <el-menu-item index="/inspection/patrolPoints" @click="patrolPoints">
              <i class="iconfont icon-firehydrant"></i>
            <template slot="title">巡检点管理</template>
            </el-menu-item>
            <el-menu-item index="/inspection/personnelLocation" @click="personnelLocation">
              <i class="iconfont icon-safeelectricity"></i>
            <template slot="title">人员定位</template>
            </el-menu-item>
        </el-menu>
      </el-aside>
      <router-view></router-view>
  </el-container>
</el-container>
</template>

<script>

import Weather from '@/views/fault/Weather.vue'
import Date from '@/views/fault/Date.vue'
   export default {
    components:{Weather,Date},
     data() {
       return {
        options: [{
          value: '选项1',
          label: 'ABC综合体项目'
        }],
        value: '',
        title:'巡检计划',
       }
     },
     methods:{
      patrolScheme(){
        this.title="巡检计划";
      },
      InspectionTasks(){
        this.title="巡检任务";
      },
      patrolPoints(){
        this.title="巡检点管理";
      },
      personnelLocation(){
        this.title="人员定位";
      }
     }
   }
</script>

<style scoped lang="less">
a{
  text-decoration: none;
  color:#fff;
}
.router-link-active{
  text-decoration: none;
  color:#fff;
}
// 头部栏目
.el-header{
    background-color: #3a4049;
    color: #fff;
    text-align: center;
    line-height: 50px;
    display: flex;
    align-items: center;
  }
  .header-left{
    height: 50px;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    p{
      font-weight: 700;
    }
  }
  .el-select{
    /deep/.el-input--suffix{
          width: 150px;
          height: 35px;
          line-height: 35px;
      }
      /deep/.el-input__inner{
          width: 150px;
          height: 35px;
      }
      /deep/.el-input__icon{
          line-height: 35px;
      }
  }
  .header-right{
    height: 30px;
    width: 180px;
    color: #fff;
    font-weight: 700;
    text-align: center;
    line-height: 30px;
    margin-left: 39px;
    border-left:2px solid #fff ;
  }
  .weather{
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }
/* 侧边导航栏 */
.el-aside {
    background-color: #3a4049;
    color: #fff;
    text-align: center;
    // line-height: 200px;
    padding-top: 30px;
    /deep/.el-menu-item{
      display: flex;
      margin-left: 30px;
      box-shadow:0 0 1px 1px #3a4049;
      &:hover{
        background: #3a5573 !important;
      }
    }
    .el-menu-item  .is-active{
        background: #3a5573 !important;
    }
  }
  .nav-top{
    height: 30px;
    display: flex;
    span{
      margin-left: 20px;
    }
  }
  
  
  
  body > .el-container {
    margin-bottom: 40px;
  }
.iconfont{
 font-size: 20px;
 color: #fff;
 margin-right: 15px;
}

</style>